import React,{Component} from 'react';
import { connect } from 'react-redux';
import { Card,Button,Input,Table,message,Select} from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import {reqSearchCurriculum,reqCurriculumList} from '../../api';
import { saveCurriculumListAction} from '../../redux/action_creators/course_action';
import {PAGE_SIZE} from '../../config';

const { Option } = Select;

@connect(
    state=>({
        course:state.course,
    }),{
        saveCurriculumList:saveCurriculumListAction,
    }
)
class Curriculum extends Component {
    state={
        curriculumList:[],//用户列表
        roleList:[],//角色列表
        isLoading:true, //table是否显示加载动画
        id:'',
        keyWord:'', //搜索关键词
        searchType:'courseName',//默认搜索方式按名称搜索

    }
    componentDidMount(){
        this.getTeacherList()
    }

    // 获取课程列表
    getTeacherList = async () => {
        let result = await reqCurriculumList()
        const { code,data,msg} = result
        // console.log(result);
       if(code === 200){
            this.setState({
                curriculumList:data,
                isLoading:false,
            })
            //   把课程列表保存到redux中
              this.props.saveCurriculumList(data)
            //   数据为空时，显示提示信息
              if(data.length===0) message.success(msg,1)  
        }else{
            message.error(msg,1)      
        } 
    }

    // 根据搜索类型搜索
    searchTeacherType=  () => {
        const {keyWord} = this.state;
        const {curriculumList } = this.props.course;
        if(keyWord.length>0){
            this.searchCurriculumList()
        }else{
            this.setState({
                curriculumList,
                isLoading:false,
            })
        }
    }
    // 搜索课程信息列表
    searchCurriculumList = async () => {
        const {searchType,keyWord} = this.state
        let result = await reqSearchCurriculum(searchType,keyWord)
        const { code,data,msg} = result
       if(code === 200){
           //   数据为空时，显示提示信息
           if(data.length===0) message.success(msg,1)  
            this.setState({
                curriculumList:data,
                isLoading:false,
            })
        }else{
            message.error(msg,1)      
        } 
    }

    render(){
        const  {curriculumList,searchType} = this.state
          const columns = [
            {title: '课程编号',
                dataIndex: 'courseNum',
                key: 'id',
            },
            {title: '课程名称',
              dataIndex: 'courseName',
              key: 'id',
            },
            {title: '授课讲师',
              dataIndex: 'username',
              key: 'id',
            },
            {title: '授课地点',
                dataIndex: 'courseRoom',
                key: 'id', 
            },
            {title: '课程日期',
                dataIndex: 'courseDate',
                key: 'id', 
                render:(courseDate)=>{return courseDate? courseDate.replace(/,/g, " 至 "):''}
            },
            {title: '课程周期',
              dataIndex: 'courseWeek',
              key: 'id',
             
            },
            {title: '课程时间',
                dataIndex: 'courseTime',
                key: 'id',
                render:(courseTime)=>{ return courseTime ? courseTime.replace(/,/g, " 至 ") : ''}
            },
            {
                title: '课程价格（元）',
                dataIndex: 'price',
                key: 'id',
                align:'center',
                width:'10%',
            },
            {title: '操作',
                key: 'id',
                align:'center',
                render:(item)=>{
                    return(
                        <Button type="link" onClick={()=>{this.props.history.push(`/training/teacher/curriculum/detail/${item.id}`)}}>详情</Button>
                        )
                }
            },
          ];
        return (
            <div>
                <Card
                    title={
                        <div>
                        <Select 
                            defaultValue={searchType} 
                            style={{ width: 150 }} 
                            onChange={(value)=>{this.setState({searchType:value})}}
                        >
                            <Option key="1" value="courseName">按课程名字搜索</Option>
                            <Option key="2" value="courseNum">按课程编号搜索</Option>
                            <Option key="3" value="username">按授课老师搜索</Option>
                            <Option key="4" value="userNum">按讲师工号搜索</Option>
                        </Select>
                        <Input 
                         style={{ width: 220 }} 
                            placeholder="请输入关键字" 
                            className="selectInput" 
                            allowClear
                            onChange={(event)=>{this.setState({keyWord:event.target.value})}}
                        />
                        <Button
                            type="primary"
                            onClick={this.searchTeacherType}
                        >
                            <SearchOutlined />搜索
                        </Button>
                   </div>
                     } 
                     extra={
                        ''
                    }
                >
                    <Table 
                        dataSource={curriculumList} 
                        columns={columns}
                        bordered
                        rowKey='id'
                        pagination={{
                            pageSize:PAGE_SIZE,
                        }}
                        loading={this.state.isLoading} 
                    />
                </Card>
            </div>
        );
    }
}
export default Curriculum;